<form action="" method="post" name="form1" id="form1">
  <table width="100%" cellpadding="0" cellspacing="0" class="listTb">
    <tr>
      <th colspan="2">병해충명</th>
      <td colspan="3">소나무재선충</td>
    </tr>
    <col width="139" />
    <col width="72" />
    <col width="290" />
    <tr>
      <th colspan="2">관리행정기관</th>
      <td colspan="3"><label for="textfield"></label>
        강릉시</td>
    </tr>
    <tr>
      <th width="75" rowspan="4">발생위치</th>
      <th>원점</th>
      <td colspan="3">중부원점</td>
    </tr>
    <tr>
      <th>타원체</th>
      <td colspan="3">GRS80</td>
    </tr>
    <tr>
      <th width="75">X좌표</th>
      <td colspan="3">299823</td>
    </tr>
    <tr>
      <th>Y좌표</th>
      <td colspan="3">185722</td>
    </tr>
    <tr>
      <th rowspan="5">발생주소</th>
      <th>국가지점번호</th>
      <td colspan="3">11122456</td>
    </tr>
    <tr>
      <th>행정구역코드</th>
      <td colspan="3">1857822</td>
    </tr>
    <tr>
      <th>주소</th>
      <td colspan="3">경기도 고양시 고양동 고양1리</td>
    </tr>
    <tr>
      <th>지번</th>
      <td colspan="3">11-1
      </td>
    </tr>
    <tr>
      <th>기타특징</th>
      <td colspan="3">없음</td>
    </tr>
    <tr>
      <th colspan="2">경급</th>
      <td colspan="3">상</td>
    </tr>
    <tr>
      <th colspan="2">감염목여부</th>
      <td colspan="3">유</td>
    </tr>
    <tr>
      <th colspan="2">시료채취여부</th>
      <td colspan="3">유</td>
    </tr>
    <tr>
      <th colspan="2">수종</th>
      <td colspan="3">소나무</td>
    </tr>
    <tr>
      <th colspan="2">예찰일</th>
      <td colspan="3">2014.08.23</td>
    </tr>
    <tr>
      <th colspan="2">예찰자 직급</th>
      <td>없음</td>
      <th>예찰자 성명</th>
      <td>홍길동</td>
    </tr>
    <tr>
      <th colspan="2">비고</th>
      <td colspan="3">산100 -1</td>
    </tr>
  </table>
  <div id="map"></div>
  <div class="btn_dp">
    <button type="button">수정</button>
    <button type="button">삭제</button>
    <button type="button">닫기</button>
  </div>
</form>


<script type="text/javascript">
var oSeoulCityPoint = new nhn.api.map.LatLng(35.4210198, 129.0843919);

	var defaultLevel = 8;
	var oMap = new nhn.api.map.Map(document.getElementById('map'), { 
									point : oSeoulCityPoint,
									zoom : defaultLevel,
									enableWheelZoom : true,
									enableDragPan : true,
									enableDblClickZoom : false,
									mapMode : 1,
									activateTrafficMap : false,
									activateBicycleMap : false,
									minMaxLevel : [ 1, 14 ],
									size : new nhn.api.map.Size("100%", 300)           });
										
	var oSlider = new nhn.api.map.ZoomControl();
	oMap.addControl(oSlider);
	oSlider.setPosition({
			top : 10,
			right : 10
	});
	
	var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
	oMap.addControl(oMapTypeBtn);
	oMapTypeBtn.setPosition({
			bottom : 10,
			right : 80
	});
	
	var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
	oThemeMapBtn.setPosition({
			bottom : 10,
			right : 10
	});
	oMap.addControl(oThemeMapBtn);
	
	
	
	var oSize = new nhn.api.map.Size(7, 7);
	var oOffset = new nhn.api.map.Size(7, 7);
	var oIcon = new nhn.api.map.Icon('/images/dot.png', oSize, oOffset);
	var oCircle = new nhn.api.map.Circle();
	var oInfoWnd = new nhn.api.map.InfoWindow();
	oInfoWnd.setVisible(false);
	oMap.addOverlay(oInfoWnd);
	
	oInfoWnd.setPosition({
			top : 20,
			left :20
	});
	
	var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
	oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
	
	oInfoWnd.attach('changeVisible', function(oCustomEvent) {
			if (oCustomEvent.visible) {
					oLabel.setVisible(false);
			}
	});
	
	var oPolyline = new nhn.api.map.Polyline([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
	}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
	var oPolygon = new nhn.api.map.Polygon([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
	});
	oMap.addOverlay(oPolygon);
	
	oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
	
	oMap.attach('mouseenter', function(oCustomEvent) {
	
			var oTarget = oCustomEvent.target;
			// 마커위에 마우스 올라간거면
			if (oTarget instanceof nhn.api.map.Marker) {
					var oMarker = oTarget;
					oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
			}
	});
	
	oMap.attach('mouseleave', function(oCustomEvent) {
	
			var oTarget = oCustomEvent.target;
			// 마커위에서 마우스 나간거면
			if (oTarget instanceof nhn.api.map.Marker) {
					oLabel.setVisible(false);
			}
	});
	
	oMap.attach('click', function(oCustomEvent) {
			var oPoint = oCustomEvent.point;
			var oTarget = oCustomEvent.target;
			console.debug(oPoint.y + " , " + oPoint.x);
			oInfoWnd.setVisible(false);
			// 마커 클릭하면
			if (oTarget instanceof nhn.api.map.Marker) {
					// 겹침 마커 클릭한거면
					if (oCustomEvent.clickCoveredMarker) {
							return;
					}
					// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, 
					// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
					// - 단, DIV 의 position style 은 absolute 가 되면 안되며, 
					// - absolute 의 경우 autoPosition 이 동작하지 않습니다. 
					oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
							'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' + 
							'발생일시 : 2014.07.18 <br />'
							+ '병해충명: 소나무 재선충<br/>' 
							+ '위치정보: ' + oTarget.getPoint()
							+'<span></div>');
					oInfoWnd.setPoint(oTarget.getPoint());
					oInfoWnd.setPosition({right : 0, top : 4});
					oInfoWnd.setVisible(true);
					oInfoWnd.autoPosition();
					return;
			}
			
	});
	oMap.addOverlay(new nhn.api.map.Marker(oIcon, { point : new nhn.api.map.LatLng(35.4270212 , 129.0887391) , title : '마커 : 35.4270212 , 129.0887391'  }));
			

</script>